<script setup lang="ts">
let showBottom = ref(false)
const handleCodeSelect = () => {
  showBottom.value = true
}
</script>

<template>
  <vs-user-input label="手机号码">
    <template #left>
      <van-image
        width="20"
        height="24"
        src="/src/assets/images/icon/phone.png"
      />
    </template>
    <template #right>
      <div @click="handleCodeSelect">
        +888<van-icon :name="showBottom ? 'arrow-up' : 'arrow-down'" />
      </div>
    </template>
  </vs-user-input>
  <van-popup
    v-model:show="showBottom"
    round
    position="bottom"
    :style="{ height: '70%' }"
  >
    <template #>
      <div class="code-title">选择国际手机区号</div>
    </template>
  </van-popup>
</template>

<style scoped>
.code-title {
  font-size: 8px;
  text-align: center;
  padding: 10px;
}
</style>
